﻿<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>CesiumWind风场</title>
    <script src="Cesium/Cesium.js"></script>
    <link href="Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script src="plugin/jquery.min.js"></script>
    <script src="plugin/wind/Particle.js"></script>
    <script src="plugin/wind/WindField.js"></script>
    <script src="plugin/wind/Windy.js"></script>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #menu {
            position: absolute;
            top: 80px;
            left: 10px;
            z-index: 999;
        }

    </style>
</head>

<body>
    <div id="menu">
        <p>
            <button onclick="Draw()">绘制</button>
        </p>
        <p>
            <!--<button onclick="ClearAll()">清除</button>-->
        </p>
    </div>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="creditContainer" style="display: none"></div>
    <span style="white-space: pre"></span>

    <script>
        //一： ArcGisMapServerImageryProvider
        var esri = new Cesium.ArcGisMapServerImageryProvider({
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
            enablePickFeatures: false,
        })
        var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider: esri,
            selectionIndicator: false,
            animation: false,
            baseLayerPicker: false,
            geocoder: false,
            timeline: false,
            sceneModePicker: true,
            navigationHelpButton: false,
            infoBox: false,
            fullscreenButton: true,
        })

        var windy

        function Draw() {
            $.ajax({
                type: 'get',
                url: './data/wind/2017121300.json', //
                dataType: 'json',
                success: function (response) {
                    var header = response[0].header
                    windy = new Windy(response, viewer)
                    redraw()
                },
                error: function (errorMsg) {
                    alert('请求数据失败1!')
                },
            })
        }

        var timer = null

        function redraw() {
            timer = setInterval(function () {
                windy.animate()
            }, 300)
        }

    </script>
</body>

</html>
